<template>
  <div class="menu-left">
    <div class="left-head-container">
      <weather />
      <div class="equipment-box">
        <div class="item-box" v-for="(item, index) in equipmentData" :key="index">
          <img :src="getImg(item.img)">
          <div class="item-content">
            <div>{{ item.desc }}</div>
            <div>{{ item.total }}</div>
            <div>{{ item.onlinePercent }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="left-middle-container">
      <div class="title-box">
        <div class="title-content">
          <div>平安新城</div>
          <div>peace countryside</div>
        </div>
        <Select class="selector">
          <Option v-for="(item, index) in selectorData" :value="item.value" :key="index">{{ item }}</Option>
        </Select>
      </div>
      <div class="table-header">
        <div>设备名称</div>
        <div>设备类型</div>
        <div>设备状态</div>
      </div>
      <div class="scroll-container">
        <div class="under-container">
          <vue3-seamless-scroll v-bind="defaultOption" :list="scrollData" class="scroll" :hover="true">
            <div class="table-item" v-for="(item, index) in scrollData" :key="index">
              <div>{{ item.name }}</div>
              <div>{{ item.type }}</div>
              <div>
                <div :class="item.status ? 'correct' : 'incorrect'"></div>
                {{ item.status ? '在线' : '离线' }}
              </div>
            </div>
          </vue3-seamless-scroll>
        </div>
      </div>
    </div>
    <div class="left-head-container">
      <div class="title-box" style="margin: 8px 20px 0 20px;">
        <div class="title-content">
          <div>应急广播</div>
          <div>ELERTICITY</div>
        </div>
      </div>
      <div class="left-under-chart" ref="echart1"></div>
    </div>
  </div>
  <div class="menu-right">
    <div class="right-head-container">
      <div class="title-box">
        <div class="title-content">
          <div>用户分布</div>
          <div>user</div>
        </div>
      </div>
      <div class="right-head-charts">
        <div class="charts">
          <div ref="echart2" v-for="(item, index) in 5" :key="index" class="each-chart"></div>
        </div>
        <div class="chart-content-box">
          <div v-for="(item, index) in chartsContentData" class="charts-content">
            <div class="title">
              <img :src="item.icon">
              <div>{{ item.title }}</div>
            </div>
            <div class="nums">
              <div>{{ item.num }}</div>
              <img :src="item.status ? getImg('up.png') : getImg('down.png')" alt="">
              <div class="gain" :style="{ color: item.status ? '#FFD15C' : '#3BDD68' }">{{ item.percent }}%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right-bottom-container">
      <div class="title-box">
        <div class="title-content">
          <div>龙泉区咨询</div>
          <div>ASDASDASDASSD</div>
        </div>
      </div>
      <div class="scroll">
        <Vue3SeamlessScroll :list="scrollData2" v-bind="defaultOption">
          <div class="scroll-box" v-for="(item, index) in scrollData2" :key="index">
            <img :src="item.img">
            <div class="content">
              <div>{{ item.title }}</div>
              <div>{{ item.time }}</div>
            </div>
          </div>
        </Vue3SeamlessScroll>
      </div>
    </div>
  </div>
  <serve :menuTopData="menuTopData" :menuBottomLeftData="menuBottomLeftData" unit='处'/>
</template>

<script setup>
import { ref, reactive, computed, getCurrentInstance, onMounted, nextTick, onUnmounted } from 'vue'
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { Step } from 'view-ui-plus';
import {useData} from "@/utils/useData.js"
const {getImg, weather,echarts,serve,map,timer,pieActive,store} = useData()
const { proxy } = getCurrentInstance();
//饼状图对象
const echart1 = ref()
const echart2 = ref()
//要传递的数据

const menuTopData = reactive([
  {
    img: getImg('yyt.png'),
    title: '营业厅共计',
    num: 32,
  },
  {
    img: getImg('gfwd.png'),
    title: '公服网点共计',
    num: 18,
  },
  {
    img: getImg('bsc.png'),
    title: '公司办事处',
    num: 6,
  },
])
const menuBottomLeftData = reactive([
  {
    img: getImg('yyt-icon.png'),
    title: '营业厅',
  },
  {
    img: getImg('gfwd-icon.png'),
    title: '公服网点',
  },
])


//左侧下拉框数据
const selectorData = ref(['全部', '当日', '近30天', '近90天', '近一年'])


//定义左侧滚动对象
const defaultOption = reactive({
  step: 0.2

})

//右侧地图滚动数据
const scrollData2 = reactive([
  {
    img: getImg('mv-2.png'),
    title: '龙泉驿区204名“树长”守护蜀道翠云廊7千多棵古树',
    time: '2022-05-31 11:13:04'
  },
  {
    img: getImg('mv-3.png'),
    title: '龙泉驿区204名“树长”守护蜀道翠云廊7千多棵古树',
    time: '2022-05-24 11:13:04'
  },
  {
    img: getImg('mv-4.png'),
    title: '龙泉驿区204名“树长”守护蜀道翠云廊7千多棵古树',
    time: '2022-05-31 11:13:04'
  },
  {
    img: getImg('mv-5.png'),
    title: '龙泉驿区204名“树长”守护蜀道翠云廊7千多棵古树',
    time: '2022-05-22 11:13:04'
  },
])


//用户信息数据
const chartsContentData = reactive([
  {
    icon: getImg('5g-icon.png'),
    title: '5G用户',
    num: 1254,
    percent: 12,
    status: 1,
  },
  {
    icon: getImg('tv-icon.png'),
    title: '有线电视用户',
    num: 54,
    percent: 9,
    status: 1,
  },
  {
    icon: getImg('tv-icon-2.png'),
    title: '地面数字电视',
    num: 12,
    percent: 14,
    status: 0,
  },
  {
    icon: getImg('user-icon.png'),
    title: '户户通用户',
    num: 154,
    percent: 5,
    status: 1,
  },
  {
    icon: getImg('bandwidth-icon.png'),
    title: '宽带用户',
    num: 125,
    percent: 22,
    status: 0,
  }
])

//点坐标信息和图标
const pointList = reactive([
  /*龙泉驿区政府 */
  {
    location: '龙泉驿区',
    lngLat: [104.27536, 30.556808],
    img: 'fwwd.png',
    phone: '15394612646',
    specificLocaltion: '四川省成都市龙泉驿区',
  },

  /* 龙泉街道办事处 */
  {
    location: '龙泉街道办',
    lngLat: [104.265402, 30.562251],
    type: true,
    img: 'excel_11.png',
    phone: '15394613646',
    specificLocaltion: '四川省成都市龙泉街道办事处',
  },

  /* 洛带古镇 */
  {
    location: '洛带古镇',
    lngLat: [104.328033, 30.635452],
    type: false,
    img: 'excel_12.png',
    phone: '15395613646',
    specificLocaltion: '洛带古镇',
  },
  /* 十陵镇 */
  {
    location: '十陵镇',
    lngLat: [104.172438, 30.645829],
    type: true,
    img: 'excel_13.jpg',
    phone: '15294613646',
    specificLocaltion: '四川省成都市十陵镇',
  }

])

//无限滚动数据
const scrollData = ref([
  {
    name: '移民村一组',
    type: '防火',
    status: 1,
  },
  {
    name: '白虎村村头',
    type: '雪亮',
    status: 0,
  },
  {
    name: '移民村二组',
    type: '防火',
    status: 1,
  },
  {
    name: '白虎村村头',
    type: '综治',
    status: 1,
  },
  {
    name: '移民村二组',
    type: '防火',
    status: 1,
  },
  {
    name: '白虎村村头',
    type: '综治',
    status: 1,
  },

])
//左边栏信息
const equipmentData = ref([
  {
    img: 'camera-icon.png',
    desc: '平安乡村设备',
    total: 134,
    onlinePercent: '在线率:98%',
  },
  {
    img: 'trumpet-icon.png',
    desc: '应急广播设备',
    total: 37,
    onlinePercent: '在线率:96%',
  }
])

const icons = reactive({
  marker: 'five-star.png',
  yytIcon: 'yyt-icon.png',
  gfwdIcom: 'gfwd-icon.png'
})
//点标记方法
const addPoint = () => {
  let content = ""
  //点坐标数组
  let maker_arr = []
  pointList.forEach(point => {
    if (point.type) {
      console.log(1);
      content = `<div><img style="width:42px;height:58px" src="${getImg(icons.yytIcon)}" /></div>`
    } else {
      console.log(2);
      content = `<div><img style="width:42px;height:58px" src="${getImg(icons.gfwdIcom)}" /></div>`
    }
    if (point.location === "龙泉驿区") {
      console.log(3);
      content = `<div><img src="${getImg(icons.marker)}" /></div>`
    }
    //点坐标对象
    let marker = new AMap.Marker({
      map: map.value,
      position: point.lngLat,
      content: content,
      extData: point
    })
    //保存当前页面点坐标信息
    maker_arr.push(marker)
    //点击事件
    marker.on('click', (e) => {
      console.log(e, 'ee');
      //展示框信息
      initInfoWindow(e.target)
    })

  })
  //保存点坐标数组
  store.commit("SETMAKER", maker_arr)

}
//初始化方法
const init = () => {
  addPoint()
  initEchart1()
  initEchart2()
}

//信息窗口方法
const initInfoWindow = (marker) => {
  let extData = marker.getExtData()
  console.log(extData, 'eeexxx');
  let content = ` <div class="model">
                  <img class="pointLine" src="${getImg('pointLine.png')}"/>
            <div class="button" onclick="closeWindow()">
                <img src="${getImg('close-icon.png')}"/>
            </div>
            <div style="margin: 15px 10px">
                <div class="title">${extData.location}${extData.type ? '营业厅' : '公服网点'}</div>
            </div>
            <img class="image" src="${getImg(extData.img)}"/>
            <div class="location-text">
                <div>网点位置：<span>${extData.specificLocaltion}</span></div>
                <div>联系电话：<span>${extData.phone}</span></div>
            </div>
        </div>`
  let infoWindow = new AMap.InfoWindow({
    isCustom: true,
    content: content,
    //鼠标点击地图后关闭
    closeWhenClickMap: true,
    autoMove: true,
    //偏移量
    offset: new AMap.Pixel(400, -172)

  })
  //保存信息窗口
  store.commit("SETINFOWINDOW", infoWindow)
  //启动信息窗口 传入地图对象和位置
  infoWindow.open(map.value, marker.getPosition())
}

//实现图表1的方法
const initEchart1 = () => {
  let img = getImg('chart1-center-icon.png')
  let trafficWay = [
    {
      name: "IP广播（个）",
      value: 137,
      color: "#00ffff"
    },
    {
      name: "调频广播（个）",
      value: 56,
      color: "#ff5b00"

    },

  ];
  let data = [];
  let color = [
    "#00ffff",
    "#ff5b00",
    "#ffe000",
    "#00ff00",
    "#ffa800",
    "#ff5b00",
    "#ff3000",
  ];
  for (let i = 0; i < trafficWay.length; i++) {
    data.push(
      {
        value: trafficWay[i].value,
        name: trafficWay[i].name,
        itemStyle: {
          normal: {
            borderWidth: 5,
            shadowBlur: 20,
            borderColor: color[i],
            shadowColor: color[i],
          },
        },
      },
      {
        value: 20,
        name: "",
        itemStyle: {
          normal: {
            color: "rgba(0, 0, 0, 0)",
            borderColor: "rgba(0, 0, 0, 0)",
            borderWidth: 0,
          },
        },
      }
    );
  }
  let seriesOption = [
    {
      name: "",
      type: "pie",
      clockWise: false,
      center: ["50%", "45%"],
      radius: [70, 70],
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      data: data,
    },
  ];
  let option = {
    color: color,
    graphic: {
      elements: [
        {
          type: "image",
          z: 1,
          style: {
            image: img,
            width: 180,
            height: 180,
          },
          left: 110,
          top: 0
        },
      ],
    },
    tooltip: {
      show: true,
    },
    legend: {
      orient: 'vertical',
      left: 'right',
      top: 'bottom',
      icon: 'circle',
      show: true,
      textStyle: {
        color: "#FFFFFF",
      },
      data: ["IP广播（个）", "调频广播（个）",],
    },
    series: seriesOption,
  };
  let chart1 = echarts.init(echart1.value);
  chart1.setOption(option);
  //饼状图高亮行为方法
  pieActive(chart1, option)
}

//实现图标2的方法
const initEchart2 = () => {


  for (let o = 0; o < 5; o++) {
    let value = parseInt(100 * Math.random());
    let option = {
      title: {
        text: '{a|' + value + '}{c|%}',
        left: 'center',
        top: 'center',
        textStyle: {
          rich: {
            a: {
              fontSize: 20,
              color: '#29EEF3'
            },

            c: {
              fontSize: 20,
              color: '#ffffff',
            }
          }
        }
      },

      series: [
        /** 俩饼 */
        {
          name: '',
          type: 'pie',
          radius: ['72%', '66%'],
          silent: true,
          clockwise: true,
          z: 0,
          label: {
            show: false,
          },
          data: [{
            value: value,
            name: "",
            itemStyle: {
              normal: {
                color: { // 完成的圆环的颜色
                  type: 'linear',
                  colorStops: [
                    {
                      offset: 0,
                      color: '#A098FC' // 0% 处的颜色
                    },
                    {
                      offset: 0.3,
                      color: '#4386FA' // 30% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: '#4FADFD' // 60% 处的颜色
                    },
                    {
                      offset: 0.8,
                      color: '#0CD3DB' // 80% 处的颜色
                    }, {
                      offset: 1,
                      color: '#646CF9' // 100% 处的颜色
                    }
                  ]
                },
              }
            }
          },
          {
            value: 100 - value,
            name: "",
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: "#173164"
              }
            }
          }
          ]
        },
        {
          name: '',
          type: 'pie',
          radius: ['61%', '35%'],
          silent: true,
          clockwise: true,
          startAngle: 270,
          z: 0,
          label: {
            show: false
          },
          data: [{
            value: value,
            name: "",
            itemStyle: {
              normal: {
                color: { // 完成的圆环的颜色
                  colorStops: [{
                    offset: 0,
                    color: '#00EDF3' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#646CF9' // 100% 处的颜色
                  }]
                },
              }
            }
          },
          {
            value: 100 - value,
            name: "",
            label: {
              show: false
            },
            itemStyle: {
              normal: {
                color: "#173164"
              }
            }
          }
          ]
        },

      ]
    };
    let chart = echart2.value[o];
    let myChart = echarts.init(chart);
    myChart.setOption(option);
  }

}



onMounted(() => {
  nextTick(() => {
    init()
    console.log(map, 'mamam');
  })
})

onUnmounted(() => {
  clearInterval(timer)
  store.dispatch('resetMap')
})
</script>

<style lang="less" scoped>
/* 小图标✓ */
.correct {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #3BDD68;
  line-height: 0;
  font-size: 0;
  vertical-align: middle;
  position: relative;

  &::before {
    @h: calc(~'100% - 90%');
    @w: calc(~'100% - 38%');
    display: block;
    content: '';
    height: @h;
    width: @w;
    background-color: #244a81;
    border-radius: calc(~'100px / 2.5');
    transform: rotateZ(316deg);
    position: absolute;
    top: calc(~'100% - 50%');
    right: calc(~'100% - 89%');
  }

  &::after {
    @h: calc(~'100% - 90%');
    @w: calc(~'100% - 69%');
    display: block;
    content: '';
    height: @h;
    width: @w;
    background-color: #244a81;
    border-radius: calc(~'100px / 2.5');
    transform: rotateZ(59deg);
    position: absolute;
    top: calc(~'100% - 41%');
    right: calc(~'100% - 50%');
  }
}

/* 小图标✕ */
.incorrect {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #D93E3E;
  line-height: 0;
  font-size: 0;
  vertical-align: middle;
  position: relative;

  &::before {
    @h: calc(~'100% - 90%');
    @w: calc(~'100% - 40%');
    display: block;
    content: '';
    height: @h;
    width: @w;
    background-color: #244a81;
    border-radius: calc(~'100px / 2.5');
    transform: rotateZ(317deg);
    position: absolute;
    top: calc(~'100% - 54%');
    right: calc(~'100% - 81%');
  }

  &::after {
    @h: calc(~'100% - 90%');
    @w: calc(~'100% - 40%');
    display: block;
    content: '';
    height: @h;
    width: @w;
    background-color: #244a81;
    border-radius: calc(~'100px / 2.5');
    transform: rotateZ(42deg);
    position: absolute;
    top: calc(~'100% - 53%');
    right: calc(~'100% - 79%');
  }
}

.menu-left {
  top: 94px;
  left: 20px;
  position: absolute;
  height: 970px;
  width: 400px;
  margin-right: 16px;
  display: inline-block;

  .left-head-container {
    border-radius: 8px;
    background-color: #11387052;
    overflow: hidden;

    .equipment-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0px 20px 20px 20px;

      .item-box {
        display: flex;

        .item-content {
          margin-left: 5px;

          div:nth-child(1) {
            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #FFFFFF;
          }

          div:nth-child(2) {
            font-family: 'Furore';
            font-style: normal;
            font-weight: 400;
            font-size: 36px;
            line-height: 41px;
            color: #F2F6FA;
            margin: 5px 0;
          }

          div:nth-child(3) {
            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: rgba(255, 255, 255, 0.64);
          }
        }

        img {
          width: 66px;
          height: 66px;
        }
      }
    }
  }

  .left-under-chart {
    width: 100%;
    height: 195px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .left-middle-container {
    height: 404px;
    margin-top: 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    background-color: #11387052;
    overflow: hidden;

    .table-header {
      margin: 20px 20px 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: rgba(255, 255, 255, 0.82);
      font-size: 14px;
    }

    .scroll-container {
      overflow: hidden;
      margin: 0px 20px 0px 20px;

      .under-container {
        height: 260px;
        margin-bottom: 20px;

        .table-item {
          margin-bottom: 18px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;

          div:nth-child(2) {
            margin-right: 15px;
          }
        }
      }

    }
  }
}

.menu-right {
  top: 95px;
  right: 20px;
  position: absolute;
  display: inline-block;
  height: 970px;
  width: 400px;

  .right-head-container {
    border-radius: 8px;
    overflow: hidden;
    background-color: #11387052;

    .right-head-charts {
      display: flex;
      align-items: center;

      .chart-content-box {
        height: 644px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .charts-content {
          .title {
            display: flex;
            align-items: center;
            font-family: 'Source Han Sans CN';
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            line-height: 22px;
            color: #B4C0CC;

            img {
              width: 25px;
              height: 25px;
              margin-right: 10px;
            }
          }

          .nums {
            font-family: 'Furore';
            font-style: normal;
            font-weight: 400;
            font-size: 50px;
            line-height: 56px;
            color: #F2F6FA;
            display: flex;
            align-items: center;

            img {
              margin: 10px 10px 0 10px;
              width: 25px;
              height: 25px;
            }

            .gain {
              margin-top: 10px;
              font-family: 'DIN';
              font-style: normal;
              font-weight: 700;
              font-size: 18px;
              line-height: 29px;
            }
          }
        }
      }

      .charts {
        .each-chart {
          width: 129px;
          height: 129px;
        }
      }
    }
  }

  .right-bottom-container {
    margin-top: 16px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #11387052;
  }
}

.scroll {
  overflow: hidden;
  height: 170px;
  padding: 10px;

  .scroll-box {
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    width: 100%;
    background-image: linear-gradient(90deg, rgba(4, 53, 99, 0.4), rgba(4, 53, 99, 0.12));
    position: relative;

    &::before {
      content: '';
      border-top: 1px solid #2993FB;
      border-left: 1px solid #2993FB;
      position: absolute;
      width: 8px;
      height: 8px;
      top: 0;
      left: 0;
    }

    &::after {
      content: '';
      border-bottom: 1px solid #2993FB;
      border-left: 1px solid #2993FB;
      position: absolute;
      width: 8px;
      height: 8px;
      top: 118px;
      left: 0;
    }

    .content-box {
      div:nth-child(1) {
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
      }

      div:nth-child(2) {
        color: rgba(242, 246, 250, 0.72);
      }

      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    img {
      border: 2px solid #12528D;
      width: 144px;
      height: 106px;

    }
  }
}
</style>
